import '../css/home.css';
import React, { useState,useEffect } from 'react';
import { useHistory } from "react-router-dom";
import { Button, Space, Swiper, Toast } from 'antd-mobile'
import img from '../assets/T3.png';
import request from "../utils/request";
import login from "./login";


//轮播图的模拟数据
const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
        <div
            className='content'
            style={{ background: color }}
        >
        </div>
    </Swiper.Item>
))


//<Home/>组件
export default ()=>{
    const [Dow,setDow] = useState([]);
    const [Release,setRelease] = useState([]);
    const history = useHistory();

//最新下载数据请求
    const getDow = async ()=>{
            const { data } = await request.post(`/getAllmessage`,{
                    type:'最新下载'
                /*给服务端传送的数据*/
            })

        //方法2
        //     const newarr = data.data.map(item=>{
        //         item.createdAt = item.createdAt.slice(0,10);
        //         return item
        //     })
        //     console.log('newarr',newarr)

            setDow(data.data);
    }

    const time2txt = (time)=>{
        time = time.slice(0,10);
        return time;
    }

    useEffect(()=>{
        getDow();
    },[]);

//最新发布数据请求
    const getRelease = async ()=>{
        const { data } = await request.post(`/getAllmessage`,{
            type:'最新发布'
        })
        setRelease(data.data);
    }

    useEffect(()=>{
        getRelease();
    },[]);




    return (
        <div className='home-modules'>
            <div className='swiper'>
                <Swiper autoplay loop>{items}</Swiper>
            </div>
            <div className='wrapper'>
                <section className='download'>
                    <section>
                        {/*最新下载*/}
                        <section className='both'>
                            <section className='title'>
                                <h2>最新下载</h2>
                            </section>

                            <section className='c-down'>

                                {
                                    Dow.map((res)=>(

                                        <div className='c-c-down' key={res._id} onClick={()=> history.push('/detail?id='+res._id)}>

                                            <img src={res.cover} />
                                            <div className='c-content'>
                                                <h2>{res.title}</h2>
                                                <span>{ time2txt(res.createdAt) }</span>
                                            </div>
                                        </div>
                                    ))
                                }

                            </section>
                        </section>
                        {/*最新发布*/}
                        <section className='both'>
                            <section className='title'>
                                <h2>最新发布</h2>
                            </section>
                            <section className='f-release'>
                                {
                                    Release.map(res=>(
                                        <div className='f-f-release' key={res._id} onClick={()=> history.push('/detail?id='+res._id)}>
                                            <div className='thumb'>
                                                <img src={res.cover} />
                                            </div>
                                            <div className='f-content' style={{paddingLeft:'8px'}}>
                                                <h2>{res.title}</h2>
                                                <span>{time2txt(res.createdAt)}</span>
                                            </div>
                                        </div>
                                    ))
                                }
                            </section>
                        </section>
                    </section>
                </section>
            </div>
        </div>


    )
}